<template>
	<view style="height: 50px;background: var(--bg-center-color);width: 100%;position: fixed;bottom: 0px;z-index: 100">
		<view class="flex-row flex-jus-bet flex-ali-cen" style="height: 100%;justify-content: space-around;">
			<view v-for="(item,index) in list" :key="index">
				<view class="flex-col flex-ali-cen" v-if="item.text != 'midButton'" @click="chooseTab(index)">
					<uni-icons custom-prefix="iconfont" :type="item.icon" size="20"
						:color="index == act?item.chooseIconColor:item.iconColor"></uni-icons>
					<view class="f-s-20 m-t-2" :style="{color:index == act?item.chooseIconColor:item.iconColor}">
						{{item.text}}
					</view>
				</view>
				<view v-else style="position: relative;bottom: 5px;" @click="centerButon(index)">
					<image :src="item.icon" style="width: 60px;height: 60px;" class="image-box"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue';

	const props = defineProps({
		act: {
			type: [Number, String],
			require: true
		}
	})
	const instance = getCurrentInstance()
	const commonJs = instance?.proxy?.$commonJs
	const list = ref([{
		text: '集团',
		path: '/pages/tabBar/group',
		icon: 'icon-jituanchanpin',
		iconColor: '#8F8F8F',
		chooseIconColor: '#74D4EB'
	}, {
		text: '综合',
		path: '/pages/tabBar/comprehensive',
		icon: 'icon-zonghechaxun',
		iconColor: '#8F8F8F',
		chooseIconColor: '#74D4EB'
	}, {
		text: 'midButton',
		path: '/pages/application',
		icon: '',
		iconColor: '#8F8F8F'
	}, {
		text: '对比',
		path: '/pages/tabBar/contrast',
		icon: 'icon-duibi',
		iconColor: '#8F8F8F',
		chooseIconColor: '#74D4EB'
	}, {
		text: '我的',
		path: '/pages/tabBar/my',
		icon: 'icon-wode',
		iconColor: '#8F8F8F',
		chooseIconColor: '#74D4EB'
	}])
	onMounted(() => {
		const system = commonJs.getSystemInfoSync()
		uni.onThemeChange(function(res) {
			if (res.theme == 'light') {
				list.value[2].icon = commonJs.getGroupInfo().group_logo_white
			} else {
				list.value[2].icon = commonJs.getGroupInfo().group_logo_black
			}
		});
		const groupInfo = commonJs.getGroupInfo()
		if (groupInfo && groupInfo.hasOwnProperty('group_logo_white') && groupInfo.hasOwnProperty(
				'group_logo_black')) {
			if (system.hasOwnProperty('theme') && system.theme == 'light') {
				list.value[2].icon = groupInfo.group_logo_white
			}
			if (system.hasOwnProperty('theme') && system.theme == 'dark') {
				list.value[2].icon = groupInfo.group_logo_black
			}
		} else {
			// 不存在重新更新拉取下集团信息
			getGroupInfo(system)
		}
	})

	const getGroupInfo = (system) => {
		let params = {
			group_id: commonJs.getRequestShopId(),
		}
		commonJs.queryCache('/group/groupInfoById', params, {
			before() {},
			success(res) {
				try {
					const {
						code,
						data,
						msg,
						server_ip
					} = res
					if (data && data.hasOwnProperty('group_logo_white') && data.hasOwnProperty(
							'group_logo_black')) {
						if (system.hasOwnProperty('theme') && system.theme == 'light') {
							list.value[2].icon = data.group_logo_white
						}
						if (system.hasOwnProperty('theme') && system.theme == 'dark') {
							list.value[2].icon = data.group_logo_black
						}
					} else {
						if (system.hasOwnProperty('theme') && system.theme == 'light') {
							list.value[2].icon = '/static/image/white_logo.png'
						}
						if (system.hasOwnProperty('theme') && system.theme == 'dark') {
							list.value[2].icon = '/static/image/black_logo.png'
						}
					}
				} catch (error) {
					commonJs.showMessage(error)
				}
			},
			fail(err) {

				commonJs.logger.debug(err, 'error')
			},
			complete() {}
		})
	}

	const chooseTab = (idx) => {
		if (idx != props.act) {
			uni.reLaunch({
				url: list.value[idx].path
			})
		}

	}
	const centerButon = (idx) => {
		uni.navigateTo({
			url: list.value[idx].path
		})
	}
</script>

<style lang="scss" scoped>
	.icon {
		width: 40rpx;
		height: 40rpx;
	}

	@media (prefers-color-scheme: dark) {
		// .image-box{
		// 	box-shadow: -3rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.5), -1rpx 2rpx 3rpx 0rpx rgba(255, 255, 255, 0.2);
		// 	border-radius: 100%;
		// }
	}

	@media (prefers-color-scheme: light) {
		// .image-box{
		// 	box-shadow: -3rpx 0rpx 6rpx 0rpx rgba(226, 226, 226, 0.5), -1rpx 2rpx 3rpx 0rpx rgba(127, 127, 127, 0.2);
		// 	border-radius: 100%;
		// }
	}
</style>